<template>
    <div class="v-left" ref="v-left" >
      <div class="l-top">
        <!-- <div class="vl-tit"><i class="amsp el-amsp-daohang1"></i><span>模型列表</span></div> -->
        <el-checkbox class="checkAll" :indeterminate="handleLeftBox.isIndeterminate" v-model="handleLeftBox.allMmodel" @change="choseAllModel">全选
        </el-checkbox>

        <el-checkbox-group v-model="handleLeftBox.choseModels" @change="choseModel">
          <div class="checkItem" v-for="(a,b) in modelList" :key="b">
            <el-checkbox :label="a.id">
              <u>{{a.name | noSuffix}}</u>
              <i class="amsp" :class="a.show?'el-amsp-keshi1 iconshow':'el-amsp-bukeshi'" @click.prevent="changeShow(a)"></i>
              <!-- <i class="amsp el-amsp-icon_nav_model_verify" :class="a.showInfo?'iconshow':''" @click.prevent="getMInfo(b)"></i> -->
            </el-checkbox>
          </div>
        </el-checkbox-group>
      </div>
      <!-- <div class="l-bottom" v-for="(a,b) in modelList" v-if="a.showInfo">
        <p><span>体积 (mm³):</span> {{a.volume}} </p>
        <p><span>表面积 (mm²):</span> {{a.area}} </p>
        <p><span>最小包围盒 (mm):</span> {{a.boxsize.x.toFixed(2)}} * {{a.boxsize.y.toFixed(2)}} * {{a.boxsize.z.toFixed(2)}}</p>
      </div> -->
    </div>
</template>

<script>
  

export default {
  components: {
  },
  props: ['handleLeftBox', 'modelList'],
  data() {
    return {
    }
  },
  computed: {
  },
  created() {},
  mounted() {},

  methods:{
    choseAllModel (isShow) {
      this.handleLeftBox.choseModels = !isShow?[]:this.modelList.map(a => a.id)
      this.choseModel()
      this.handleLeftBox.isIndeterminate = false;
    },
    changeShow (a) {
      this.$emit('changeShow', a)
    },
    getMInfo (idx) {
      this.modelList.forEach((a,b) => {
        if (b == idx) {
          if (!a.area) {
            this.$emit('getMInfo', a)
          } else {
            a.showInfo = true
          }
        } else {
          a.showInfo = false
        }
      })
      
    },
    choseModel (ids) {
      if (!ids) {ids = this.handleLeftBox.choseModels}
      this.$parent.render();
      this.handleLeftBox.allMmodel = ids.length === this.modelList.length;
      this.handleLeftBox.isIndeterminate = ids.length > 0 && ids.length < this.modelList.length;
      this.$parent.choseCurrentKey()
    },
  }
}
</script>
<style scoped lang="less">
@nav_height: 30px;
@media screen and (-webkit-device-pixel-ratio: 1) {
  .v-left {
    &::-webkit-scrollbar {
      /*滚动条整体样式*/
      width : 4px;
      height: 1px;
    }
    &::-webkit-scrollbar-thumb {
      /*滚动条里面小方块*/
      border-radius: 10px;
      box-shadow   : inset 0 0 5px rgba(0, 0, 0, 0.2);
      background   : #535353;
    }
    &::-webkit-scrollbar-track {
      /*滚动条里面轨道*/
      box-shadow   : inset 0 0 5px rgba(0, 0, 0, 0.2);
      border-radius: 10px;
      background   : #ededed;
    }

  }
}

.omit {
  white-space: nowrap;
  overflow:  hidden;
  text-overflow:  ellipsis;
}
.v-left {
  position: fixed;
  left: 0;
  top: @nav_height;
  // bottom: @nav_height;
  // background-color: rgba(255,255,255, 0.6);
  width: 190px;
  overflow-y: auto;
  z-index: 3;
  max-height: calc(100% - @nav_height * 3 - 74PX);
  // display: flex;
  // flex-direction: column;
  // justify-content: space-between;
  .l-bottom {
    margin-top: 20px;
    padding-left: 20px;
    padding-bottom: 10px;
    p {
      color: #606266;
      font-size: 12px;
      line-height: 14px;
      margin: 0;
      margin-bottom: 5px;
      span {
        display: block;
        // display: inline-block;
        // width: 3.5em;
        // text-align: justify;
        // text-align-last: justify;
      }
    }
  }
  .l-top .vl-tit {
    font-size: 16px;
    font-weight: bold;
    background-color: #D0D0D0;
    line-height: 40px;
    padding-left: 20px;
    .amsp {
      margin-right: 5px;
    }
  }
  .checkAll {
    margin: 0 10px;
    border-bottom: 1px solid #DFDFDF;
    display: block;
    padding: 10px 10px;
    /deep/.el-checkbox__label {
      width: calc(100% - 10px);
      i {
        float: right;
        line-height: 19px;
      }
    }
  }
  .checkItem {
    .el-checkbox {
      display: block;
      padding: 5px 0 5px 20px;
    }
    /deep/.el-checkbox__label {
      width: calc(100% - 30px);
      u {
        text-decoration: none;
        width: calc(100% - 22px);
        display: inline-block;
        vertical-align: top;
        .omit()
      }
      i {
        /*float: right;*/
        width: 20px;
        line-height: 19px;
        padding-left: 2px;
        text-align: center;
        height: 19px;
        font-size: 16px;
        color: #606266;
        &.iconshow {
          color: #1296DB;
        }
      }
    }
  }
}
</style>